<template>
 <div class="menu">
   <div class="chin" v-for="(item, index) in ChinData" :key="index" :style="item.class" @click="Router(item.path)">{{item.text}}</div>

 </div>
</template>
<script>
         
export default {
  data(){ 
       
   return {

      ChinData:[
        {text:"FlexFlow",path:"/FlexFlow",class:"background-color:#f40"},
         {text:"JustifyContent",path:"/JustifyContent",class:"background-color:red"},
          {text:"AlignItems",path:"/AlignItems",class:"background-color:#d949e5"},
           {text:"AlignContent",path:"/AlignContent",class:"background-color:blue"},
            {text:"ProjectProperties",path:"/ProjectProperties",class:"background-color:black"}
      ]
   }
  },
 components: {

 },
  beforeCreate:function (){

// 在实例初始化之后，数据观测 (data observer) 和 event/watcher 事件配置之前被调用。


  },
 created:function (){

 // 在实例创建完成后被立即调用。在这一步，实例已完成以下的配置：数据观测 (data observer)，属性和方法的运算，watch/event 事件回调。然而，挂载阶段还没开始，el 属性目前尚不可用。

 

  },
  beforeMount:function (){

  },
  methods: {

// 在挂载开始之前被调用：相关的 render 函数首次被调用。
Router(path){
  console.log(path)
  
   this.$router.push(path)
}


  }

}

</script>

<style  scope>
.menu {
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: white;
  flex-direction: row;

}
.chin{
  height: 30px;
  line-height: 30px;
  font-size: 12px;
  text-align: center;
  border-radius: 5px;
 
}
</style>